﻿<template>
  <div class="followFriends">
    <!-- 好友列表 -->
    <div class="dress_load" v-if="dressloadShow">
      <van-loading color="#1989fa" size="80" :vertical="true" class="dress_load_load" />
    </div>
    <div class="followFriends" v-else  :style="{ marginTop: Height + 'px' }">
      <header_ title="好友列表" :pathName="this.$store.state" background='#ffffff' color='#000000' image_='0' size='4.8vw'
        v-on:getHeight="getHeight($event)" />
      <div class="list_box" v-if="goods_friends.length" >
        <div v-for="item,index in goods_friends" :key="index" class="list_center" @click="todress_new(item)">
          <div class="img_header">
            <img :src="item.head_pic" alt="">
            <div class="center_alt">
              <div><span>{{item.nickname}}</span>
              <img v-if="item.sex == 1 " src="../../public/img/other/boy_lab.png" alt="">
              <img v-if="item.sex == 2 " src="../../public/img/dress_new/grilx.png" alt="">
              </div>
              <span>ID:{{item.perfect_number}}</span>
            </div>
          </div>
          <div><img src="../../public/img/dress_new/jinru.png" alt=""></div>
        </div>
      </div>
      <div v-else class="nofirend">
        你还没有好友
      </div>
    </div>
  </div>
</template>

<script>
  import header_ from '../../components/header_'
  import {
    Dialog,
    Toast
  } from 'vant';
  export default {
    data() {
      return {
        dressloadShow: true,
        goods_friends: [], //好友列表
        Height: 0
      };
    },
    components: {
      header_
    },
    created() {
      this.get_friend();
    },
    methods: {
      getHeight(height) {
        this.Height = height;
      },
      //获取好友列表
      get_friend() {
        let arys = {}; //参数
        let url = "/message/friend";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.dressloadShow = false;
            this.goods_friends = res.data.result;
          } else {
            Toast(res.data.text);
          }
        });
      },
      todress_new(item) {
        if (this.$store.state.pathName == '/Festival') {
          Dialog.confirm({
              title: "邀请你的另一半",
              message: '是否邀请' + item.nickname + '成为你的另一半',
               confirmButtonColor: '#0091FF'
            })
            .then(() => {
              this.cpInvite(item.user_id)
            })
            .catch(() => {
              // on cancel
            });
        } else {
          var arr = JSON.stringify(item)
          this.$router.replace({
            path: "dress_new",
            query: {
              friends_: encodeURIComponent(arr)
            },
          });
        }
      },
      cpInvite(toUserId) {
        let arys = {
          toUserId
        }; //参数
        let url = "/activity/qixiInvite";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            Toast(res.data.text)
            setTimeout(() => {
              this.$router.push(this.$store.state.pathName);
            }, 2000)
          } else {
            Toast(res.data.text);
          }
        });
      }
    },
  };
</script>

<style scoped>
  .center_alt>span {
    font-size: 2.9vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #767676;
  }

  .center_alt>div>img {
    width: 3.4vw;
    height: 3.4vw;
    padding-left: 1vw;
  }

  .center_alt>div {
    display: flex;
    align-items: center;
  }

  .center_alt {
    display: flex;
    flex-direction: column;
    margin-left: 2vw;
    flex: 1;
  }

  .img_header>img {
    width: 12.1vw;
    height: 12.1vw;
    border-radius: 50%;
  }

  .img_header {
    display: flex;
  }

  .list_center>div:nth-of-type(2)>img {
    width: 100%;
    height: 100%;
  }

  .list_center>div:nth-of-type(2) {
    width: 2.5vw;
    height: 4vw;
  }

  .list_center {
    width: 100%;
    height: 12vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2vw 0;
  }

  .list_box {
    width: 90vw;
    margin: 0 auto;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    /* margin-top: 26.6vw; */
  }

  .friends_list {
    width: 100vw;
    font-size: 4.4vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #000000;
    width: 100vw;
    height: 10vw;
    margin-top: 8vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .followFriends {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
  }

  .dress_load {
    width: 100vw;
    height: 100vh;
    position: relative;
    background: #fff;
    overflow: hidden;
  }

  .dress_load_load {
    margin-top: 40vh;
  }

  .nofirend {
    width: 100vw;
    padding-top: 40vw;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    display: flex;
    justify-content: center;
  }
</style>